<template>
  <div class="regional_water">
    <el-row class="all_main">
      <dragdrop :width="0" :widthLeft="'140px'">
        <template slot="left">
          <div class="all_left">
            <div class="grid-content bg-purple">
              <div class="header_title">
                <span>区域楼栋</span>
              </div>
              <div class="tree_list">
                <el-tree
                  :data="treedata"
                  node-key="id"
                  default-expand-all
                  :expand-on-click-node="false"
                  @node-click="clickNode"
                  :highlight-current="true"
                  ref="tree"
                  :indent="2"
                >
                  <span
                    class="custom-tree-node"
                    slot-scope="{ node, data }"
                    :style="{ paddingLeft: '0px' }"
                  >
                    <span
                      :class="
                          data.type == 'area' ? 'colorfont' : 'colorfont1'
                        "
                    >
                      <i :class="data.icon" :style="{ marginRight: '5px' }"></i>
                      {{ node.label }}
                    </span>
                  </span>
                </el-tree>
              </div>
            </div>
          </div>
        </template>
        <template slot="right">
          <div class="all_right">
            <el-form :inline="true" :model="elform" class="demo-form-inline1">
              <el-form-item label="开始日期:">
                <el-date-picker
                  v-model="datetime[0]"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期"
                  style="width: 130px"
                  size="mini"
                  :clearable="false"
                ></el-date-picker>
                <el-time-picker
                  style="width:110px"
                  v-model="time[0]"
                  value-format="HH:mm:ss"
                  placeholder="开始时间"
                  :clearable="false"
                  size="mini"
                ></el-time-picker>
              </el-form-item>
              <el-form-item label="结束日期:">
                <el-date-picker
                  v-model="datetime[1]"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期"
                  style="width: 130px"
                  size="mini"
                  :clearable="false"
                ></el-date-picker>
                <el-time-picker
                  style="width:110px"
                  v-model="time[1]"
                  value-format="HH:mm:ss"
                  placeholder="结束时间"
                  :clearable="false"
                  size="mini"
                ></el-time-picker>
              </el-form-item>
              <el-form-item class="searchmarigin">
                <el-button
                  type="primary"
                  @click="onSubmit"
                  size="mini"
                  icon="el-icon-search"
                  v-if="activeName == 'first' ? true : false"
                >查询</el-button>
                <el-button
                  type="primary"
                  @click="DailySubmit"
                  size="mini"
                  icon="el-icon-search"
                  v-if="activeName == 'third' ? true : false"
                >查询</el-button>
                <el-button
                  type="primary"
                  @click="DetailsonSubmit"
                  size="mini"
                  icon="el-icon-search"
                  v-if="activeName == 'second' ? true : false"
                >查询</el-button>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="() => changeradio(1)"
                  size="mini"
                >当日</el-button>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="() => changeradio(2)"
                  size="mini"
                >本月</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onExport"
                  size="mini"
                  icon="el-icon-document-copy"
                  v-if="activeName == 'first' ? true : false"
                >导出</el-button>
                <el-button
                  type="primary"
                  @click="onDailyExport"
                  size="mini"
                  icon="el-icon-document-copy"
                  v-if="activeName == 'third' ? true : false"
                >导出</el-button>
                <el-button
                  type="primary"
                  @click="DetailsonExport"
                  size="mini"
                  icon="el-icon-document-copy"
                  v-if="activeName == 'second' ? true : false"
                >导出</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onExport('print')"
                  size="mini"
                  icon="el-icon-printer"
                  v-if="activeName == 'first' ? true : false"
                >打印</el-button>
                <el-button
                  type="primary"
                  @click="onDailyExport('print')"
                  size="mini"
                  icon="el-icon-printer"
                  v-if="activeName == 'third' ? true : false"
                >打印</el-button>
                <el-button
                  type="primary"
                  @click="DetailsonExport('print')"
                  size="mini"
                  icon="el-icon-printer"
                  v-if="activeName == 'second' ? true : false"
                >打印</el-button>
              </el-form-item>
              <el-form-item v-if="activeName == 'first'">
                <el-popover width="500" placement="top" trigger="click">
                  <el-row>
                    <el-col :span="6" v-for="item in Object.keys(formThead)" :key="item">
                      <el-checkbox
                        :label="formThead[item].label"
                        v-model="formThead[item].checked"
                        @change="checkboxChanged()"
                      ></el-checkbox>
                    </el-col>
                  </el-row>
                  <el-button
                    slot="reference"
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                  >自定义</el-button>
                </el-popover>
              </el-form-item>
              <el-form-item v-if="activeName == 'second'">
                <el-popover width="500" placement="top" trigger="click">
                  <el-row>
                    <el-col :span="6" v-for="item in Object.keys(formThead2)" :key="item">
                      <el-checkbox
                        :label="formThead2[item].label"
                        v-model="formThead2[item].checked"
                        @change="checkboxChanged2()"
                      ></el-checkbox>
                    </el-col>
                  </el-row>
                  <el-button
                    slot="reference"
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                  >自定义</el-button>
                </el-popover>
              </el-form-item>
              <el-form-item v-if="activeName == 'third'">
                <el-popover width="550" placement="top" trigger="click">
                  <el-row>
                    <el-col :span="6" v-for="item in Object.keys(formThead3)" :key="item">
                      <el-checkbox
                        :label="formThead3[item].label"
                        v-model="formThead3[item].checked"
                        @change="checkboxChanged3()"
                      ></el-checkbox>
                    </el-col>
                  </el-row>
                  <el-button
                    slot="reference"
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                  >自定义</el-button>
                </el-popover>
              </el-form-item>
            </el-form>
            <div class="tabs_main">
              <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="区域使用汇总" name="first">
                  <el-table
                    v-loading="loading"
                    :data="detailslist"
                    ref="table"
                    border
                    highlight-current-row
                    :header-cell-style="(header) => headFirst(header, 2)"
                    style="width: 100%"
                    :cell-style="
                      detailsTotal
                        ? (res) => headFirst_col(res, detailslist)
                        : () => {}
                    "
                  >
                    <el-table-column
                      prop="buildingName"
                      label="楼栋"
                      v-if="formThead.buildingName.checked"
                      align="center"
                      min-width="140px"
                    ></el-table-column>
                    <el-table-column
                      prop="roomName"
                      label="房间"
                      v-if="formThead.roomName.checked"
                      align="center"
                      min-width="100px"
                    ></el-table-column>

                    <el-table-column
                      prop="terminalName"
                      label="设备名称"
                      v-if="formThead.terminalName.checked"
                      align="center"
                      min-width="100px"
                    ></el-table-column>
                    <el-table-column
                      prop="minExpenditure"
                      label="最小消费金额(元)"
                      v-if="formThead.minExpenditure.checked"
                      align="center"
                      min-width="100px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.minExpenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="maxExpenditure"
                      label="最大消费金额(元)"
                      v-if="formThead.maxExpenditure.checked"
                      align="center"
                      min-width="100px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.maxExpenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="sumExpenditure"
                      label="合计(元)"
                      v-if="formThead.sumExpenditure.checked"
                      align="center"
                      min-width="100px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.sumExpenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="count"
                      label="消费次数"
                      v-if="formThead.count.checked"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="avgExpenditure"
                      label="平均消费金额(元)"
                      v-if="formThead.avgExpenditure.checked"
                      align="center"
                      min-width="100px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.avgExpenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="userCount"
                      label="消费人数"
                      v-if="formThead.userCount.checked"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="avgUserExpenditure"
                      label="人均消费金额(元)"
                      v-if="formThead.avgUserExpenditure.checked"
                      align="center"
                      min-width="100px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.avgUserExpenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="page">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChangepage"
                      :current-page="currentPage"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="recordCount"
                    ></el-pagination>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="每日使用汇总" name="third">
                  <el-table
                    ref="detailslist3"
                    :data="detailslist3"
                    border
                    highlight-current-row
                    row-key="id"
                    :tree-props="{
                      children: 'dayList',
                      hasChildren: 'hasChildren',
                    }"
                    :header-cell-style="headFirst"
                    style="width: 100%"
                    v-loading="loading3"
                    :cell-style="
                      detailsDailyTotal
                        ? (res) => headFirst_col(res, headerArr)
                        : () => {}
                    "
                  >
                    <el-table-column
                      prop="buildingName"
                      label="楼栋"
                      v-if="formThead3.buildingName.checked"
                      min-width="140px"
                    ></el-table-column>
                    <el-table-column
                      prop="roomName"
                      label="房间"
                      v-if="formThead3.roomName.checked"
                      align="center"
                      min-width="100px"
                    ></el-table-column>
                    <el-table-column
                      prop="dataMakeTime"
                      label="日期"
                      v-if="formThead3.dataMakeTime.checked"
                      align="center"
                      min-width="130px"
                    ></el-table-column>
                    <el-table-column
                      prop="minExpenditure"
                      label="最小消费金额(元)"
                      v-if="formThead3.minExpenditure.checked"
                      align="center"
                      min-width="100px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.minExpenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="maxExpenditure"
                      label="最大消费金额(元)"
                      v-if="formThead3.maxExpenditure.checked"
                      align="center"
                      min-width="100px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.maxExpenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="sumExpenditure"
                      label="合计(元)"
                      v-if="formThead3.sumExpenditure.checked"
                      align="center"
                      min-width="100px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.sumExpenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="amountCount"
                      label="使用次数"
                      v-if="formThead3.amountCount.checked"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="avgExpenditure"
                      label="平均消费金额(元)"
                      v-if="formThead3.avgExpenditure.checked"
                      align="center"
                      min-width="100px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.avgExpenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="userCount"
                      label="使用人数"
                      v-if="formThead3.userCount.checked"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="avgUserExpenditure"
                      label="人均消费金额(元)"
                      v-if="formThead3.avgUserExpenditure.checked"
                      align="center"
                      min-width="100px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.avgUserExpenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="page">
                    <el-pagination
                      @size-change="handleSizeChange3"
                      @current-change="handleCurrentChangepage3"
                      :current-page="currentPage3"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="pageSize3"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="recordCount3"
                    ></el-pagination>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="使用明细" name="second">
                  <el-table
                    v-loading="loading2"
                    :data="detailslist2"
                    ref="detailslist2"
                    border
                    highlight-current-row
                    :header-cell-style="headFirst"
                    style="width: 100%"
                    :cell-style="
                      ermainaldeTotal
                        ? (res) => headFirst_col(res, detailslist2)
                        : () => {}
                    "
                  >
                    <el-table-column prop="userName" label="姓名" v-if="formThead2.userName.checked"></el-table-column>
                    <el-table-column
                      prop="cardNumber"
                      label="卡号"
                      v-if="formThead2.cardNumber.checked"
                      min-width="100px"
                    ></el-table-column>

                    <el-table-column
                      prop="userNumber"
                      label="人员编号"
                      v-if="formThead2.userNumber.checked"
                      min-width="100px"
                    ></el-table-column>
                    <el-table-column
                      prop="dataMakeTime"
                      label="操作时间"
                      width="158PX"
                      v-if="formThead2.dataMakeTime.checked"
                    ></el-table-column>
                    <el-table-column
                      prop="walletName"
                      label="消费钱包"
                      v-if="formThead2.walletName.checked"
                    ></el-table-column>
                    <el-table-column
                      prop="expenditure"
                      label="消费金额(元)"
                      v-if="formThead2.expenditure.checked"
                      min-width="120px"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.expenditure | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="newBalance"
                      label="剩余金额(元)"
                      v-if="formThead2.newBalance.checked"
                    >
                      <template slot-scope="scope">
                        <div>{{ scope.row.newBalance | amountyuan }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="isSuccess"
                      label="交易类型"
                      v-if="formThead2.isSuccess.checked"
                    >
                      <template slot-scope="scope">
                        {{
                        scope.row.isSuccess | filterchargingType
                        }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="serialNumber"
                      label="卡片流水号"
                      v-if="formThead2.serialNumber.checked"
                    ></el-table-column>
                    <el-table-column
                      prop="terminalName"
                      label="设备名称"
                      v-if="formThead2.terminalName.checked"
                    ></el-table-column>
                  </el-table>
                  <div class="page">
                    <el-pagination
                      @size-change="handleSizeChange2"
                      @current-change="handleCurrentChangepage2"
                      :current-page="currentPage2"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="pageSize2"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="recordCount2"
                    ></el-pagination>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </template>
      </dragdrop>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elform: {},
      radio: 4,
      datetime: [],
      time: [],
      // 电吹风区域汇总
      formThead: {
        buildingName: {
          label: '楼栋',
          prop: 'buildingName',
          checked: true
        },
        roomName: {
          label: '房间',
          prop: 'roomName',
          checked: true
        },
        terminalName: {
          label: '设备名称',
          prop: 'terminalName',
          checked: true
        },

        //最小消费金额
        minExpenditure: {
          label: '最小消费金额',
          prop: 'minExpenditure',
          checked: true
        },

        //最大消费金额
        maxExpenditure: {
          label: '最大消费金额',
          prop: 'maxExpenditure',
          checked: true
        },
        //合计消费金额
        sumExpenditure: {
          label: '合计',
          prop: 'sumExpenditure',
          checked: true
        },
        //消费次数
        count: {
          label: '消费次数',
          prop: 'count',
          checked: true
        },
        //平均消费金额
        avgExpenditure: {
          label: '平均消费金额',
          prop: 'avgExpenditure',
          checked: true
        },
        //消费人数
        userCount: {
          label: '消费人数',
          prop: 'userCount',
          checked: true
        },
        //人均消费金额
        avgUserExpenditure: {
          label: '人均消费金额',
          prop: 'avgUserExpenditure',
          checked: true
        }
      },
      activeName: 'first',
      treedata: [],
      detailsTotal: null,
      headerArr: [],
      detailslist: [],
      loading: false,
      pageNum: 1,
      pageSize: 20,
      searchInfo: {},
      currentPage: 0,
      recordCount: 0,

      startTime: '',
      endTime: '',
      checktype: '',
      typeid: '',
      exportlist: [],
      filename: '电吹风区域汇总表',

      // 电吹风区域使用明细
      loading2: false,
      ermainaldeTotal: null,
      detailslist2: [],
      formThead2: {
        userName: { label: '姓名', prop: 'userName', checked: true },
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        userNumber: { label: '人员编号', prop: 'userNumber', checked: true },
        dataMakeTime: {
          label: '操作时间',
          prop: 'dataMakeTime',
          checked: true
        },
        walletName: { label: '消费钱包', prop: 'walletName', checked: true },

        expenditure: {
          label: '消费金额(元)',
          prop: 'expenditure',
          checked: true
        },
        newBalance: {
          label: '剩余金额(元)',
          prop: 'newBalance',
          checked: true
        },
        isSuccess: { label: '交易类型', prop: 'isSuccess', checked: true },
        serialNumber: {
          label: '卡片流水号',
          prop: 'serialNumber',
          checked: true
        },
        terminalName: {
          label: '设备名称',
          prop: 'terminalName',
          checked: true
        }
        // pulseFlag: { label: "是否有脉冲", prop: "pulseFlag", checked: true },
      },
      pageNum2: 1,
      pageSize2: 20,
      searchInfo2: {},
      currentPage2: 0,
      recordCount2: 0,
      exportlist2: [],
      filename2: '电吹风区域使用明细表',

      // 区域每日使用明细
      loading3: false,
      detailsDailyTotal: null,
      detailslist3: [],
      formThead3: {
        buildingName: {
          label: '楼栋',
          prop: 'buildingName',
          checked: true
        },
        roomName: {
          label: '房间',
          prop: 'roomName',
          checked: true
        },
        dataMakeTime: { label: '日期', prop: 'dataMakeTime', checked: true },
        //最小消费金额
        minExpenditure: {
          label: '最小消费金额',
          prop: 'minExpenditure',
          checked: true
        },

        //最大消费金额
        maxExpenditure: {
          label: '最大消费金额',
          prop: 'maxExpenditure',
          checked: true
        },
        //合计消费金额
        sumExpenditure: {
          label: '合计',
          prop: 'sumExpenditure',
          checked: true
        },
        //使用次数
        amountCount: {
          label: '使用次数',
          prop: 'amountCount',
          checked: true
        },
        //平均消费金额
        avgExpenditure: {
          label: '平均消费金额',
          prop: 'avgExpenditure',
          checked: true
        },
        //消费人数
        userCount: {
          label: '使用人数',
          prop: 'userCount',
          checked: true
        },
        //人均消费金额
        avgUserExpenditure: {
          label: '人均消费金额',
          prop: 'avgUserExpenditure',
          checked: true
        }
      },
      pageNum3: 1,
      pageSize3: 20,
      searchInfo3: {},
      currentPage3: 0,
      recordCount3: 0,
      exportlist3: [],
      filename3: '电吹风区域每日使用汇总表'
    }
  },
  filters: {},
  created() {
    this.startTime = this.getNowTime('yy-mm-dd 00')
    this.endTime = this.getNowTime('yy-mm-dd 59')
    this.datetime = [this.getNowTime('yy-mm-dd'), this.getNowTime('yy-mm-dd')]
    this.time = ['00:00:00', '23:59:59']
  },
  mounted() {
    this.getareabuldingtree()
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  methods: {
    // 用水汇总表格重新渲染
    checkboxChanged() {
      this.$nextTick(() => {
        this.$refs['table'].doLayout()
      })
    },
    // 电吹风区域使用明细表格重新渲染
    checkboxChanged2() {
      this.$nextTick(() => {
        this.$refs['detailslist2'].doLayout()
      })
    },
    //格式化日期：yyyy-MM-dd
    formatDate(date) {
      var myyear = date.getFullYear()
      var mymonth = date.getMonth() + 1
      var myweekday = date.getDate()

      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      return myyear + '-' + mymonth + '-' + myweekday
    },
    changeradio() {
      this.radio = radio
      if (this.radio == 1) {
        this.datetime = [
          this.getNowTime('yy-mm-dd'),
          this.getNowTime('yy-mm-dd')
        ]
        this.time = ['00:00:00', '23:59:59']
      }
      if (this.radio == 2) {
        this.datetime = [
          this.getNowTime('yy-mm-01'),
          this.getNowTime('yy-mm-31')
        ]
        this.time = ['00:00:00', '23:59:59']
      }
      if (this.activeName == 'first') {
        this.onSubmit()
      } else if (this.activeName == 'third') {
        this.DailySubmit()
      } else if (this.activeName == 'second') {
        this.DetailsonSubmit()
      }
    },
    // 树状数据添加
    recursiveget(treedata) {
      for (var i in treedata) {
        if (treedata[i].type == 'area') {
          treedata[i].icon = 'el-icon-map-location'
          this.recursiveget(treedata[i].children)
        } else {
          if (treedata[i].type == 'building') {
            treedata[i].icon = 'el-icon-office-building'
          }
          if (treedata[i].type == 'floor') {
            treedata[i].icon = 'el-icon-school'
          }
          if (treedata[i].type == 'room') {
            treedata[i].icon = 'el-icon-house'
          }
          this.recursiveget(treedata[i].children)
        }
      }
      return treedata
    },
    // 获取区域楼栋树形数据
    getareabuldingtree(val) {
      this.$http({
        url: this.$http.adornUrl('/area/room/get-water-area-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.treedata = this.recursiveget(data.messageContent)
          //   this.getarealsit(data.messageContent)
          console.log(this.treedata)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //点击树状
    clickNode(obj, node) {
      console.log(obj)
      this.checktype = obj.type
      this.typeid = obj.name
      if (this.activeName == 'first') {
        this.onSubmit()
      } else if (this.activeName == 'third') {
        this.DailySubmit()
      } else if (this.activeName == 'second') {
        this.DetailsonSubmit()
      }
    },
    // 导出专用
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    /**
     * 电吹风区域使用汇总
     */
    // 获取电吹风区域使用汇总合计数据
    getTotal() {
      let _this = this
      _this.loading = true
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/hair/hair-drier-area-statistics-total'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: _this.searchInfo,
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading = false
            if (data.messageCode == 200) {
              resolve(data.messageContent)
            } else {
              reject(data.errorMessage)
              this.$message.error(data.errorMessage)
            }
          })
      })
    },
    // 电吹风区域使用汇总数据查询
    async onSubmit() {
      this.searchInfo = {}
      this.pageNum = 1
      if (this.checktype == 'area') {
        this.searchInfo.areaGuid = this.typeid
      }
      if (this.checktype == 'building') {
        this.searchInfo.buildingGuid = this.typeid
      }
      if (this.checktype == 'floor') {
        this.searchInfo.layer = this.typeid.split('$')[0]
        this.searchInfo.buildingGuid = this.typeid.split('$')[1]
      }
      if (this.checktype == 'room') {
        this.searchInfo.roomGuid = this.typeid
      }

      this.searchInfo.startTime = this.datetime[0] + ' ' + this.time[0]
      this.searchInfo.endTime = this.datetime[1] + ' ' + this.time[1]
      this.searchInfo.timeType = this.radio
      this.searchInfo.unitGuid = this.changeschoolid

      this.detailsTotal = null
      this.detailsTotal = await this.getTotal()
      this.gestatistics()
    },
    // 获取电吹风区域使用汇总数据
    gestatistics() {
      this.loading = true
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/hair/hair-drier-area-statistics-page'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.loading = false
          this.detailslist = data.messageContent.data || []
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          if (data.messageContent.data == null) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          } else {
            this.detailslist.push({
              ...this.detailsTotal
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 电吹风区域使用汇所有数据导出、打印
    async onExport(type) {
      if (this.detailslist.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      await this.getExport()
      if (type == 'print') {
        this.printJS()
      } else {
        this.export2Excel()
      }
    },
    // 获取电吹风区域使用汇总所有数据
    getExport() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/hair/hair-drier-area-statistics-page'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount,
                searchInfo: _this.searchInfo
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.exportlist = data.messageContent.data || []
              _this.exportlist.push({ ..._this.detailsTotal })
              _this.exportlist.map(item => {
                //人均消费金额
                item.avgUserExpenditure = _this.amountyua(
                  item.avgUserExpenditure
                )
                //平均消费金额
                item.avgExpenditure = _this.amountyua(item.avgExpenditure)
                //最大消费金额
                item.maxExpenditure = _this.amountyua(item.maxExpenditure)
                //最小消费金额
                item.minExpenditure = _this.amountyua(item.minExpenditure)
                //合计消费金额
                item.sumExpenditure = _this.amountyua(item.sumExpenditure)
              })

              resolve(_this.exportlist)
            } else {
              reject(data.errorMessage)
              _this.$message.error(data.errorMessage)
            }
          })
      })
    },
    // 打印相关
    printJS() {
      let someJSONdata = this.exportlist
      const title = '电吹风区域汇总表'
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      // 拿到数据formThead
      for (let key in this.formThead) {
        if (this.formThead[key].checked) {
          properties.push({
            displayName: this.formThead[key].label,
            field: this.formThead[key].prop
          })
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo.startTime),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo.endTime),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 2,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    // 导出
    export2Excel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        // tHeaderarr.push('部门名称')

        let tHeader = []
        let filterVal = []
        for (let key in this.formThead) {
          if (this.formThead[key].checked) {
            tHeader.push(this.formThead[key].label)
            filterVal.push(this.formThead[key].prop)
          }
        }

        const list = this.exportlist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename + nowtime
        })
      })
    },
    // 电吹风区域使用汇总分页
    handleSizeChange(val) {
      this.pageSize = val
      this.gestatistics()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.gestatistics()
    },
    //
    /**
     * 区域每日使用
     */
    checkboxChanged3() {
      this.$nextTick(() => {
        this.$refs['detailslist3'].doLayout()
      })
    },
    // 区域每日使用查询
    async DailySubmit() {
      this.pageNum3 = 1
      this.searchInfo3 = {}
      this.searchInfo3.unitGuid = this.changeschoolid

      if (this.checktype == 'area') {
        this.searchInfo3.areaGuid = this.typeid
      }
      if (this.checktype == 'building') {
        this.searchInfo3.buildingGuid = this.typeid
      }
      if (this.checktype == 'floor') {
        this.searchInfo3.layer = this.typeid.split('$')[0]
        this.searchInfo3.buildingGuid = this.typeid.split('$')[1]
      }
      if (this.checktype == 'room') {
        this.searchInfo3.roomGuid = this.typeid
      }
      this.searchInfo3.startTime = this.datetime[0] + ' ' + this.time[0]
      this.searchInfo3.endTime = this.datetime[1] + ' ' + this.time[1]
      this.searchInfo3.timeType = this.radio
      this.searchInfo3.unitGuid = this.changeschoolid
      this.detailsDailyTotal = null
      this.detailsDailyTotal = await this.getDailyTotal()
      this.getDailydetailslist()
    },
    // 获取电吹风区域使用汇总合计数据
    getDailyTotal() {
      let _this = this
      _this.loading = true
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/hair/hair-drier-ever-day-gather-area-total'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: _this.searchInfo3,
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading = false
            if (data.messageCode == 200) {
              resolve(data.messageContent)
            } else {
              reject(data.errorMessage)
              this.$message.error(data.errorMessage)
            }
          })
      })
    },
    // 区域每日使用查询
    getDailydetailslist() {
      this.loading3 = true
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/hair/hair-drier-ever-day-gather-area-page'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum3,
            pageSize: this.pageSize3,
            searchInfo: this.searchInfo3
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.loading3 = false
          if (data.messageContent.data == null) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
          this.detailslist3 = data.messageContent.data || []
          this.recordCount3 = data.messageContent.recordCount
          this.currentPage3 = data.messageContent.pageNum
          if (this.detailslist3.length != 0) {
            this.detailslist3.push({
              ...this.detailsDailyTotal
            })
          }
          this.headerArr = []
          for (var i = 0; i < this.detailslist3.length; i++) {
            this.detailslist3[i].id = 'aa' + [i].toString()
            this.headerArr.push(this.detailslist3[i])
            if (
              this.detailslist3[i].dayList != null &&
              this.detailslist3[i].dayList.length != 0
            ) {
              for (var j = 0; j < this.detailslist3[i].dayList.length; j++) {
                this.headerArr.push(this.detailslist3[i].dayList[j])
                this.detailslist3[i].dayList[j].id =
                  'ab' + i.toString() + 'a' + j.toString()
              }
            }
          }
          console.log(this.detailslist3)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 区域每日用水导出或打印
    async onDailyExport(type) {
      if (this.detailslist3.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      await this.getDailyExport()
      if (type == 'print') {
        this.printDailyJS()
      } else {
        this.exportDailyExcel()
      }
    },

    // 打印相关
    printDailyJS() {
      let someJSONdata = this.DailyExportlist
      const title = '电吹风区域每日使用汇总表'
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      for (let key in this.formThead3) {
        if (this.formThead3[key].checked) {
          console.log(Object.keys(this.formThead3).length)
          if (this.formThead3[key].prop == 'dataMakeTime') {
            properties.push({
              displayName: this.formThead3[key].label,
              field: this.formThead3[key].prop,
              columnSize: 150 / (Object.keys(this.formThead3).length + 1) + '%'
            })
          } else {
            properties.push({
              displayName: this.formThead3[key].label,
              field: this.formThead3[key].prop,
              columnSize: 100 / (Object.keys(this.formThead3).length + 1) + '%'
            })
          }
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo3.startTime),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo3.endTime),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 2,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    // 获取到所有数据
    getDailyExport() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/hair/hair-drier-ever-day-gather-area-page'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount3,
                searchInfo: _this.searchInfo3
              },
              messageType: _this.messageType
            })
          })
          .then(({ data }) => {
            if (data.messageCode === 200) {
              // _this.DailyExportlist = data.messageContent.data;
              _this.DailyExportlist = []
              let arr = data.messageContent.data || []
              arr.map(item => {
                _this.DailyExportlist.push(item)
                if (item.dayList.length != 0) {
                  item.dayList.map(Citem => {
                    _this.DailyExportlist.push(Citem)
                  })
                }
              })
              _this.DailyExportlist.push({
                ..._this.detailsDailyTotal
              })
              _this.DailyExportlist.map(item => {
                //人均消费金额
                item.avgUserExpenditure = _this.amountyua(
                  item.avgUserExpenditure
                )
                //平均消费金额
                item.avgExpenditure = _this.amountyua(item.avgExpenditure)
                //最大消费金额
                item.maxExpenditure = _this.amountyua(item.maxExpenditure)
                //最小消费金额
                item.minExpenditure = _this.amountyua(item.minExpenditure)
                //合计消费金额
                item.sumExpenditure = _this.amountyua(item.sumExpenditure)
              })

              resolve(_this.DailyExportlist)
            } else {
              reject(data.errorMessage)
              _this.$message.error(data.errorMessage)
            }
          })
      })
    },
    exportDailyExcel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        let tHeaderarr = []
        let filterValArr = []
        for (let key in this.formThead3) {
          if (this.formThead3[key].checked) {
            tHeaderarr.push(this.formThead3[key].label)
            filterValArr.push(this.formThead3[key].prop)
          }
        }
        const tHeader = tHeaderarr

        const filterVal = filterValArr
        const list = this.DailyExportlist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename3 + nowtime
        })
      })
    },
    handleSizeChange3(val) {
      this.pageSize3 = val
      this.getDailydetailslist()
    },
    handleCurrentChangepage3(val) {
      this.pageNum3 = val
      this.getDailydetailslist()
    },

    /**
     *  电吹风区域使用明细
     */
    async DetailsonSubmit() {
      this.pageNum2 = 1
      this.searchInfo2 = {}
      this.searchInfo2.unitGuid = this.changeschoolid
      if (this.checktype == 'area') {
        this.searchInfo2.areaGuid = this.typeid
      }
      if (this.checktype == 'building') {
        this.searchInfo2.buildingGuid = this.typeid
      }
      if (this.checktype == 'floor') {
        this.searchInfo2.layer = this.typeid.split('$')[0]
        this.searchInfo2.buildingGuid = this.typeid.split('$')[1]
      }
      if (this.checktype == 'room') {
        this.searchInfo2.roomGuid = this.typeid
      }
      this.searchInfo2.startTime = this.datetime[0] + ' ' + this.time[0]
      this.searchInfo2.endTime = this.datetime[1] + ' ' + this.time[1]
      this.searchInfo2.timeType = this.radio
      this.searchInfo2.unitGuid = this.changeschoolid
      this.ermainaldeTotal = null
      this.ermainaldeTotal = await this.getTermainaldeTotal()
      this.gettermainaldetailslist()
    },

    handleClick() {},
    // 获取电吹风区域使用明细合计数据
    getTermainaldeTotal() {
      let _this = this
      _this.loading2 = true
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/hair/hair-drier-area-details-total'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: _this.searchInfo2,
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading2 = false
            if (data.messageCode == 200) {
              resolve(data.messageContent)
            } else {
              reject(data.errorMessage)
              this.$message.error(data.errorMessage)
            }
          })
      })
    },
    //电吹风区域使用明细
    gettermainaldetailslist() {
      this.loading2 = true
      this.$http({
        url: this.$http.adornUrl('/terminal/hair/hair-drier-area-details-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum2,
            pageSize: this.pageSize2,
            searchInfo: this.searchInfo2
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.loading2 = false
          console.log(data)
          this.detailslist2 = data.messageContent.data || []
          this.recordCount2 = data.messageContent.recordCount
          this.currentPage2 = data.messageContent.pageNum
          if (this.detailslist2.length != 0) {
            this.detailslist2.push({
              ...this.ermainaldeTotal,
              newBalance: ''
            })
          }
          if (this.detailslist2.length == 0) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 导出得到所有使用明细数据
    async DetailsonExport(type) {
      if (this.detailslist2.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      await this.getDetailson()
      if (type == 'print') {
        this.printDetailsonJS()
      } else {
        this.export2Excel2()
      }
    },
    // 得到所有使用明细数据
    getDetailson() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/hair/hair-drier-area-details-page'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount2,
                searchInfo: _this.searchInfo2
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.exportlist2 = data.messageContent.data
              if (_this.exportlist2.length != 0) {
                _this.exportlist2.push({
                  ..._this.ermainaldeTotal,
                  newBalance: ''
                })
              }
              for (var i = 0; i < _this.exportlist2.length; i++) {
                if (_this.exportlist2[i].pulseFlag == 0) {
                  _this.exportlist2[i].pulseFlag = '是'
                }
                if (_this.exportlist2[i].pulseFlag == 1) {
                  _this.exportlist2[i].pulseFlag = '否'
                }
                // 交易类型
                _this.exportlist2[i].isSuccess = _this.filterchargingType(
                  _this.exportlist2[i].isSuccess
                )
                _this.exportlist2[i].expenditure = _this.amountyua(
                  _this.exportlist2[i].expenditure
                )
                _this.exportlist2[i].newBalance = _this.amountyua(
                  _this.exportlist2[i].newBalance
                )
              }
              // setTimeout(() => {
              //   _this.export2Excel2();
              // }, 100);
              resolve(_this.exportlist2)
            } else {
              _this.$message.error(data.errorMessage)
              reject(data.errorMessage)
            }
          })
          .catch(function(e) {
            // console.log(e)
            _this.$message.error('请求数据失败，请重新导出')
          })
      })
    },
    // 打印相关
    printDetailsonJS() {
      let someJSONdata = this.exportlist2
      const title = '电吹风区域使用明细表'
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      for (let key in this.formThead2) {
        if (this.formThead2[key].checked) {
          console.log(Object.keys(this.formThead2).length)
          if (this.formThead2[key].prop == 'dataMakeTime') {
            properties.push({
              displayName: this.formThead2[key].label,
              field: this.formThead2[key].prop,
              columnSize: 150 / (Object.keys(this.formThead2).length + 1) + '%'
            })
          } else {
            properties.push({
              displayName: this.formThead2[key].label,
              field: this.formThead2[key].prop,
              columnSize: 100 / (Object.keys(this.formThead2).length + 1) + '%'
            })
          }
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo2.startTime),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo2.endTime),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 2,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    // 导出
    export2Excel2() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        let tHeaderarr = []
        let filterValArr = []
        for (let key in this.formThead2) {
          if (this.formThead2[key].checked) {
            tHeaderarr.push(this.formThead2[key].label)
            filterValArr.push(this.formThead2[key].prop)
          }
        }
        const tHeader = tHeaderarr
        const filterVal = filterValArr
        const list = this.exportlist2
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename2 + nowtime
        })
      })
    },
    // 分页
    handleSizeChange2(val) {
      this.pageSize2 = val
      this.gettermainaldetailslist()
    },
    handleCurrentChangepage2(val) {
      this.pageNum2 = val
      this.gettermainaldetailslist()
    }
  }
}
</script>
<style lang="scss" scoped>
.regional_water {
  padding: 0px;
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .regional_water .demo-form-inline .el-date-editor.el-input {
    width: 100px;
  }
  .demo-form-inline,
  .demo-form-inline1 {
    padding-left: 10px;
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 0px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 340px;
    }
  }
  .demo-form-inline1 {
    // margin-bottom: 5px;
    // border-bottom: 1px solid #ccc;
  }
  .all_left {
    // height: 400px;
    height: 100%;
    // border-right: 2px solid #ccc;
    .bg-purple {
      height: 100%;
      width: 100%;
      // overflow-x: scroll;
      white-space: nowrap;
      // padding: 0 10px 0 0px;
      .header_title {
        padding: 20px 0;
        font-weight: bolder;
        text-align: center;
        border-bottom: 1px solid #e5e9f2;
        color: #909399;
        overflow: hidden;
      }
      .add_button {
        display: flex;
        padding-top: 20px;
        justify-content: center;
        border-bottom: 1px solid #e5e9f2;
        padding-bottom: 10px;
        overflow: hidden;
      }
      //滚动条的宽度
      ::-webkit-scrollbar {
        overflow-y: auto;
        width: 10px;
        height: 10px;
      }
      //滚动条的滑块
      ::-webkit-scrollbar-thumb {
        background-color: #a1a3a9;
        border-radius: 3px;
      }
      .tree_list {
        height: calc(100vh - 200px);
        width: 100%;
        // overflow-x: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
          background-color: transparent;
        }
        .custom-tree-node {
          // padding-left: 10px;
          /deep/.el-button + .el-button {
            margin-left: 0px;
          }
          //
          font-size: 12px;
          .colorfont {
            color: #17b3a3;
          }
        }
      }
    }
  }
  .all_right {
    height: calc(100vh - 140px);
    // background:red;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      background-color: transparent;
    }
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>